<template>
  <div class="click-animations-demo">
    <h2>点击动画示例</h2>

    <!-- 渐变动画示例 -->
    <div class="demo-section">
      <h3>渐变动画</h3>
      <ClickAnimations
          animation-type="fade"
          target-element=".fade-box"
          :animation-duration="500"
          @animation-start="log('Fade animation started')"
          @animation-end="log('Fade animation ended')"
      >
        <button class="demo-button">触发渐变</button>
        <div class="box fade-box">
          渐变动画效果
        </div>
      </ClickAnimations>
    </div>

    <!-- 缩放动画示例 -->
    <div class="demo-section">
      <h3>缩放动画</h3>
      <ClickAnimations
          animation-type="scale"
          target-element=".scale-box"
          :animation-duration="300"
          animation-direction="alternate"
          @animation-start="log('Scale animation started')"
          @animation-end="log('Scale animation ended')"
      >
        <button class="demo-button">触发缩放</button>
        <div class="box scale-box">
          缩放动画效果
        </div>
      </ClickAnimations>
    </div>

    <!-- 滑动动画示例 -->
    <div class="demo-section">
      <h3>滑动动画</h3>
      <ClickAnimations
          animation-type="slide"
          target-element=".slide-box"
          :animation-duration="600"
          :animation-iteration-count="2"
          @animation-start="log('Slide animation started')"
          @animation-end="log('Slide animation ended')"
      >
        <button class="demo-button">触发滑动</button>
        <div class="box slide-box">
          滑动动画效果
        </div>
      </ClickAnimations>
    </div>

    <!-- 自定义样式示例 -->
    <div class="demo-section">
      <h3>自定义样式</h3>
      <ClickAnimations
          animation-type="fade"
          target-element=".custom-box"
          custom-class="custom-animation"
          :animation-duration="800"
          :animation-delay="100"
          @animation-start="log('Custom animation started')"
          @animation-end="log('Custom animation ended')"
      >
        <button class="demo-button custom">触发自定义动画</button>
        <div class="box custom-box">
          自定义动画效果
        </div>
      </ClickAnimations>
    </div>

    <!-- 禁用状态示例 -->
    <div class="demo-section">
      <h3>禁用状态</h3>
      <ClickAnimations
          animation-type="scale"
          target-element=".disabled-box"
          :disabled="true"
          @animation-start="log('Disabled animation started')"
          @animation-end="log('Disabled animation ended')"
      >
        <button class="demo-button disabled">禁用状态（点击无效）</button>
        <div class="box disabled-box">
          禁用状态
        </div>
      </ClickAnimations>
    </div>
  </div>
</template>

<script setup>
import ClickAnimations from '@/components/ClickAnimations/ClickAnimations.vue'

const log = (msg) => console.log(msg)
</script>

<style scoped>
.click-animations-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  margin-bottom: 30px;
}

h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.demo-button {
  padding: 10px 20px;
  font-size: 14px;
  background: #42b983;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.demo-button:hover {
  background: #3aa876;
}

.demo-button.custom {
  background: #6366f1;
}

.demo-button.custom:hover {
  background: #4f46e5;
}

.demo-button.disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.box {
  width: 200px;
  height: 200px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  transition: background-color 0.3s;
}

.fade-box {
  background: #42b983;
}

.scale-box {
  background: #e6a23c;
}

.slide-box {
  background: #f56c6c;
}

.custom-box {
  background: #6366f1;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.disabled-box {
  background: #909399;
}

/* 自定义动画样式 */
:deep(.custom-animation) {
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}
</style>